import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { formatAmount } from '@/lib/tools';
const RankingChart = ({ data = [], details = [], onFilter, className }) => {
    return <ResponsiveContainer className={className} width="100%" height="100%">
        <BarChart
            layout="vertical"
            data={data}
            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
        >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis type="number" dataKey="amount" className="text-xs text-muted-foreground" />
            <YAxis type="category" dataKey="name" className="text-xs text-muted-foreground" />
            <Tooltip content={({ active, payload, label }) => {
                const value = formatAmount(payload?.[0]?.value);
                const maxSize = 5;
                const filterItems = (onFilter?.(details, label) || []);
                const topFilterItems = (onFilter?.(details, label) || []).sort((a, b) => b.amount - a.amount).slice(0, maxSize);
                return <div className="custom-tooltip text-xs">
                    <p className="label">{`${label} (${value || '-'})`}</p>
                    <p className="intro">{ }</p>
                    <p className="desc">
                        <ol className="mt-2 space-y-1 list-disc pl-4">
                            {
                                topFilterItems.map(item => {
                                    return <li>
                                        <span>{item.remark} ({formatAmount(item.amount)})</span>
                                    </li>
                                })
                            }
                            {
                                filterItems.length > maxSize ? <li>等{filterItems.length - maxSize}项明细被省略...</li> : ''
                            }
                        </ol>
                    </p>
                </div>
            }} />
            <Bar dataKey="amount" style={{
                fill: "hsl(var(--primary))",
                opacity: 0.9,
            }} />
        </BarChart>
    </ResponsiveContainer>
};

export default RankingChart;